<template>
	<view class="center">
		<!-- <view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">
				<text>足迹</text>
			</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius">
			</view>
		</view> -->
		<hea-ders title="足迹">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<!-- 年-月-日 -->
		<view class="row">
			<text>日期</text>
			<view class="value" style="z-index: 9999!important;">
				<biaofun-datetime-picker placeholder="请选择发布时间" defaultValue="2020-06-08" fields="day" @change="changeDatetimePicker1"
				 style="font-size: 28rpx;"></biaofun-datetime-picker>
				 <image src="../../../static/images/1372.png" mode=""></image>
			</view>
		</view>
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<view class="buttom">
			<view class="bottom_item">
				<text>09:41 今日签到4次</text>
				<text class="guiji" @tap="$open('../track/track')">轨迹</text>
			</view>
			<view class="bottom_items" @tap="$open('../footprintDetails/footprintDetails')">
				<text>江苏省徐州市泉山区淮海西路27号 中枢小区</text>
				<image src="../../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			biaofunDatetimePicker,
			heaDers
		},
		data() {
			return {
				defaultValue: '2020-06-16', // 默认值
				showCenterVisible: false,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}],

			};
		},
		methods: {
			changeDatetimePicker1(date) {
				console.log('选择的日期时间数据：', date);
			},
			date() {
				alert('111')
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center {
		width: 100%;
		// height: 100;
		position: relative;
		box-sizing: border-box;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		.row {
			display: flex;
			justify-content: space-between;
			background: rgba(0,0,0,0);
			height: 56rpx;
			align-items: center;
			padding: 0 20rpx;
			text {
				font-size: 28rpx;
			}
			.value{
				display: flex;
				align-items: center;
			}
			image {
				width: 24rpx;
				height: 20rpx;
				margin-left: 20rpx;
			}
		}
		.page-body {
			height: 100%;
			.page-section {
				map {
					width: 100%;
					height: 1070rpx;
				}
			}
		}
		.buttom {
			height: 136rpx;
			border-bottom: 1px solid #F5F5F5;
			padding-bottom: 26rpx;
			.bottom_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26rpx;
				text {
					font-size: 28rpx;
				}
				.guiji {
					color: #2593E9;
					width: 80rpx;
					height: 40rpx;
					border: 1px solid rgba(37, 147, 233, 1);
					opacity: 1;
					text-align: center;
				}
			}

			.bottom_items {
				font-size: 24rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 30rpx;

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}

	}
</style>
